<template>
  <div id="news-list">
    <top-header title="新闻列表" mintPopup="mintPopup" />
    <div class="news-list-container">
      <div
        class="news-item"
        @click="openNewsDetailPopup(item.id)"
        v-for="item in newsList"
        :key="item.id"
      >
        <div class="item-img">
          <img :src="item.img_url" />
        </div>
        <div class="news-info">
          <p>{{item.title | strLimit(13)}}</p>
          <p>点击次数：{{item.click}}</p>
          <p>{{item.add_time | formatDate}}</p>
        </div>
      </div>
    </div>
    <mt-popup
      :visible="isShow"
      v-model="isShow"
      :position="position"
      style="width:100%;height:100%;"
      ref="newsDetailPopup"
    >
      <news-detail />
    </mt-popup>
  </div>
</template>
<script>
import "./index.less";
import { middleVue } from "../../services";
export default {
  data() {
    return {
      newsList: [],
      position: "right",
      isShow: false
    };
  },
  methods: {
    openNewsDetailPopup(id) {
      middleVue.$emit("getNewsId", id);
      middleVue.$emit("getPopupComponent", {
        newsDetail: this.$refs.newsDetailPopup
      });
      this.isShow = true;
    }
  },
  created() {
    // middleVue.$on("closePopup", isClose => {
    //   this.isShow = isClose;
    // });
    this.$axios
      .get("getnewslist")
      .then(res => {
        this.newsList = res.data.message;
      })
      .catch(err => console.log(err));
  },
  destroyed() {
    middleVue.$off("closePopup");
  }
};
</script>
